<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			body {
				background: #666;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				height: 100vh;
			}

			canvas {
				background: #fff;
				/* width: 1000px;
        height: 500px; */
			}
		</style>
	</head>

	<body>
		<!--
      坐标系解释

      方块, 设置颜色
      方框, 设置边框颜色
      橡皮擦
    -->
		<canvas id="canvas" width="500" height="500"></canvas>
		<script>
			/** @type {HTMLCanvasElement} */ // 提示补全

			const oCanvas = document.getElementById('canvas');
			oCanvas.width = 500
			oCanvas.height = 500

			const ctx = oCanvas.getContext('2d'); //拿到画笔

			// 设置填充颜色
			ctx.fillStyle = 'red';
			// 开始填充
			ctx.fillRect(100, 50, 100, 100);

			// 设置描边颜色
			ctx.strokeStyle = 'rgba(60, 250, 100, 1)';
			// 开始描边
			ctx.strokeRect(150, 100, 100, 100);

			// 清空画布指定区域
			ctx.clearRect(150, 100, 30, 30);
		</script>
	</body>
</html>
